<template>
  <div class="app-container" v-enter-helper="getList">
    <el-card class="box-card" v-if="isList">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form
            :inline="true"
            :model="listQuery"
            ref="dataList2"
            class="demo-form-inline"
          >
            <el-form-item label="">
              <el-select
                filterable
                v-model="listQuery.gift_bag_id"
                placeholder="请选择礼包"
              >
                <el-option
                  v-for="item in giftBagList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input
                type="text"
                v-model="listQuery.nickname"
                placeholder="用户昵称"
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                type="text"
                v-model.number="listQuery.user_code"
                placeholder="用户编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                type="text"
                v-model="listQuery.invite_nickname"
                placeholder="邀请人昵称"
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                type="text"
                v-model.number="listQuery.invite_user_code"
                placeholder="邀请人编号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchSubmit">查询</el-button>
              <el-button type="primary" @click="resetSubmit">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <div class="item">
        <el-table
          v-loading="listLoading"
          ref="dataList"
          :data="menuList"
          style="width:100%;margin-bottom: 20px;"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <!-- <el-table-column type="selection"></el-table-column> -->
          <el-table-column prop="user_code" label="用户ID"> </el-table-column>
          <el-table-column prop="nickname" label="昵称"> </el-table-column>
          <el-table-column prop="invite_user_code" label="邀请人用户ID">
          </el-table-column>
          <el-table-column prop="invite_nickname" label="邀请人昵称">
          </el-table-column>
          <el-table-column prop="gift_bag_name" label="礼包名称">
          </el-table-column>
          <el-table-column prop="gift_bag_detail" label="礼包内容">
            <template slot-scope="scope">
              <div style="display:flex;flex-direction:column;">
                <div
                  v-for="(item, index) in scope.row.gift_bag_detail"
                  :key="index"
                  style="margin:5px;"
                >
                  <el-tag type="warning" v-if="item.type === 1"
                    >金币✖{{ item.gold }}个</el-tag
                  >
                  <el-tag type="success" v-if="item.type === 2"
                    >{{ item.name }}✖{{ item.quantity }}个</el-tag
                  >
                  <el-tag type="danger" v-if="item.type === 3"
                    >{{ item.name }}✖{{ item.days }}天</el-tag
                  >
                  <el-tag type="primary" v-if="item.type === 4"
                    >{{ item.name }}✖{{ item.days }}天</el-tag
                  >
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="add_time" label="添加时间"> </el-table-column>
          <!-- <el-table-column label="操作" width="260px">
                        <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleDetail(scope.row)" plain>查看详情</el-button>
                        </template>
                    </el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.perPage"
          @pagination="getList"
        />
      </div>
    </el-card>
    <!--  -->
    <!-- <el-card class="box-card" v-if="!isList">
            <div slot="header" class="clearfix">
                <el-button @click="isList = true"  >返回</el-button>
                <el-button type="success" @click="goList(1)"  >礼物记录</el-button>
                <el-button type="info" @click="goList(2)"  >在线时间</el-button>
                <el-button type="danger" @click="goList(3)"  >私聊记录</el-button>
                <el-button type="primary" @click="goList(4)"  >聊天室记录</el-button>
            </div>
            <div class="item">
                <div v-if="listNum === 1">
                    <el-table ref="dataList" :data="menuList1" style="margin-bottom: 20px;" row-key="id" border>
                    <el-table-column prop="gift_info" label="礼物" > </el-table-column>
                    <el-table-column prop="total_price" label="礼物价值" > </el-table-column>
                    <el-table-column prop="coin" label="特殊币" > </el-table-column>
                    <el-table-column prop="add_time" label="时间" > </el-table-column>
                    </el-table>
                </div>
                <div v-if="listNum === 2">
                    <el-table ref="dataList" :data="menuList2" style="margin-bottom: 20px;" row-key="id" border>
                    <el-table-column prop="room_id" label="房间id" > </el-table-column>
                    <el-table-column prop="room_name" label="房间名称" > </el-table-column>
                    <el-table-column prop="join_time" label="加入时间" > </el-table-column>
                    <el-table-column prop="left_time" label="离开时间" > </el-table-column>
                    <el-table-column prop="total_seconds" label="在线时间" sortable> </el-table-column>
                    </el-table>
                </div>
                <div v-if="listNum === 3">
                    <el-input class="marginRB10" v-model="listQuery.name" placeholder="消息内容" style="width:200px;" clearable></el-input>
                    <el-input class="marginRB10" v-model="listQuery.name" placeholder="对方昵称" style="width:200px;" clearable></el-input>
                    <el-input class="marginRB10" v-model="listQuery.name" placeholder="对方ID" style="width:200px;" clearable></el-input>
                    <el-button type="primary" @click="getList" icon="el-icon-search"   class="marginRB10">搜索</el-button>
                    <el-table ref="dataList" :data="menuList3" style="margin-bottom: 20px;" row-key="id" border>
                        <el-table-column prop="id" label="" > </el-table-column>
                        <el-table-column prop="id" label="对方昵称" > </el-table-column>
                        <el-table-column prop="name" label="用户id" > </el-table-column>
                        <el-table-column prop="price" label="消息内容" > </el-table-column>
                        <el-table-column prop="renew" label="消息时间"> </el-table-column>
                    </el-table>
                </div>
                <div v-if="listNum === 4">
                    <el-input class="marginRB10" v-model="listQuery.name" placeholder="消息内容" style="width:200px;" clearable></el-input>
                    <el-input class="marginRB10" v-model="listQuery.name" placeholder="房间名称" style="width:200px;" clearable></el-input>
                    <el-input class="marginRB10" v-model="listQuery.name" placeholder="房间ID" style="width:200px;" clearable></el-input>
                    <el-button type="primary" @click="getList" icon="el-icon-search"   class="marginRB10">搜索</el-button>
                    <el-table ref="dataList" :data="menuList4" style="margin-bottom: 20px;" row-key="id" border>
                        <el-table-column prop="id" label="房间名称" > </el-table-column>
                        <el-table-column prop="name" label="房间id" > </el-table-column>
                        <el-table-column prop="price" label="发送消息" > </el-table-column>
                        <el-table-column prop="renew" label="发送时间"> </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-card> -->
  </div>
</template>

<script>
import { listTypeData, listData } from "@/api/member/acceptBag";
export default {
  data() {
    return {
      menuList4: [],
      menuList3: [],
      menuList2: [],
      menuList1: [],
      listNum: 1,
      isList: true,
      giftBagList: [],
      listLoading: false,
      menuList: [],
      total: 10,
      listQuery: {
        page: 1,
        perPage: 10,
        gift_bag_id: undefined,
        user_code: undefined,
        nickname: undefined,
        invite_user_code: undefined,
        invite_nickname: undefined,
        content: undefined
      }
    };
  },
  created() {
    this.getBagList();
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      let urlData = "?";
      if (this.listQuery.page) {
        urlData = urlData + `page=${this.listQuery.page}&`;
      }
      if (this.listQuery.perPage) {
        urlData = urlData + `perPage=${this.listQuery.perPage}`;
      }
      if (this.listQuery.gift_bag_id) {
        urlData = urlData + `&gift_bag_id=${this.listQuery.gift_bag_id}`;
      }
      if (this.listQuery.user_code === 0 || this.listQuery.user_code) {
        urlData = urlData + `&user_code=${this.listQuery.user_code}`;
      }
      if (this.listQuery.nickname === 0 || this.listQuery.nickname) {
        urlData = urlData + `&nickname=${this.listQuery.nickname}`;
      }
      if (
        this.listQuery.invite_user_code === 0 ||
        this.listQuery.invite_user_code
      ) {
        urlData =
          urlData + `&invite_user_code=${this.listQuery.invite_user_code}`;
      }
      if (
        this.listQuery.invite_nickname === 0 ||
        this.listQuery.invite_nickname
      ) {
        urlData =
          urlData + `&invite_nickname=${this.listQuery.invite_nickname}`;
      }

      listData(urlData).then(response => {
        this.menuList = response.data.list;
        this.total = response.data.meta.total;
        this.listLoading = false;
      });
    },
    searchSubmit() {
      this.listQuery.page = 1;
      this.getList();
    },
    resetSubmit() {
      this.listQuery.page = 1;
      this.listQuery.perPage = 10;
      (this.listQuery.gift_bag_id = undefined),
        (this.listQuery.user_code = undefined),
        (this.listQuery.nickname = undefined),
        (this.listQuery.invite_user_code = undefined),
        (this.listQuery.invite_nickname = undefined),
        (this.listQuery.content = undefined);
    },
    // 获取礼包
    getBagList() {
      let urlData = `?page=1&perPage=10000`;
      listTypeData(urlData).then(response => {
        response.data.list.forEach(item => {
          this.giftBagList.push({ value: item.id, label: item.name });
        });
      });
    },
    handleDetail() {
      this.isList = false;
      this.goList(1);
    },
    goList(type) {
      this.listNum = type;
      if (type === 1) {
      } else if (type === 2) {
      } else if (type === 3) {
      } else if (type === 4) {
      }
    }
  }
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

/deep/.el-card__header {
  padding-bottom: 0;
}
</style>
